<template>
    <div class="rankingTab" v-if="item">
        <!-- {{ item }} -->
        <div :class="index + 1 > 9 ? 'rangkingBgS' : 'rangkingBgB'">
            <i>{{ index + 1 }}</i>
        </div>
        <div class="rankingTabImg" @click="jumpPathTo(item.comic_id)">
            <img :src="item.vertical_cover" alt="" />
            <span class="loading">图片加载中...</span>
        </div>
        <div class="rankingTabText">
            <div class="rankingTabTop">{{ item.title }}</div>
            <div class="rankingTabBottom" v-if="item.styles[0]">
                <span>{{ item["author"] | dispose }}</span>
                <span>{{ item["styles"][0].name }}</span>
                <span>{{ judgment(item.last_ord, item.last_short_title) }}</span>
            </div>
            <i class="detection" v-if="ctype" :class="ctype(type)"> <van-icon :name="ctype(type)" />{{ state(item.last_rank, index) }}</i>
        </div>
    </div>
</template>

<script>
export default {
    props: ["item", "index"],
    name: "rankingTab",
    data() {
        return {
            type: 0,
        };
    },

    filters: {
        dispose(value) {
            let str = "";
            for (let i = 0; i < value.length; i++) {
                str += value[i] + " ";
            }
            return str;
        },
    },
    methods: {
        ctype() {
            if (this.type == 0) {
                return "minus";
            } else if (this.type == 1) {
                return "arrow-up";
            } else if (this.type == -1) {
                return "arrow-down";
            }
        },
        judgment(x, y) {
            if (x == Number(y)) {
                return "已完结 共" + x + "章";
            } else {
                return "更新至" + x + "章";
            }
        },
        state(x, y) {
            if (x > y + 1) {
                this.type = 1;
            } else if (x < y + 1) {
                this.type = -1;
            } else {
                this.type = 0;
            }
        },
        jumpPathTo(x) {
            this.$router.push({ path: `/details/${x}`, query: { id: x } });
        },
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
.rankingTab {
    font-size: $fontSize;
    width: 8.2933rem;
    height: 3.7333rem;
    margin: 0 0.5333rem 0.5333rem 1.1733rem;
    display: flex;
    align-items: center;
    position: relative;
    .rangkingBgB {
        position: absolute;
        top: 0;
        font-size: 88px;
        left: -1.0133rem;
        color: $activeColor;
        font-family: "Courier New", Courier, monospace;
    }
    .rangkingBgS {
        position: absolute;
        top: 0;
        font-size: 20px;
        left: -0.64rem;
        color: $color;
        font-family: "Courier New", Courier, monospace;
    }
    .rankingTabImg {
        width: 2.72rem;
        height: 3.6267rem;
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 2.72rem;
            height: 100%;
            text-align: center;
            line-height: 3.6267rem;
            color: pink;
            background-color: whitesmoke;
            z-index: -1;
        }
        img {
            width: 100%;
        }
    }
    .rankingTabText {
        width: 5.0933rem;
        height: 3.6267rem;
        margin-left: 0.2133rem;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
        i {
            position: absolute;
            bottom: 0.1067rem;
            right: 0;
            font-size: 0.32rem;
            &.minus {
                color: #999;
            }
            &.arrow-up {
                color: red;
            }
            &.arrow-down {
                color: cadetblue;
            }
        }
        .rankingTabTop {
            height: 0.64rem;
            width: 4.3467rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .rankingTabBottom {
            color: #90959b;
            font-size: 0.32rem;
            height: 1.92rem;
            width: 4.3467rem;
            display: flex;
            flex-direction: column;
            span {
                padding-top: 0.23rem;
            }
        }
    }
}
</style>
